<template>
	<view class="center p-x-20">
		<view class="">
			<view v-if="orderInfo" class=" p-x-20 p-y-20 radius-20 bs-bx po-r" style="background-color: #fff;">
				<view class="flex-a">
					<uv-icon name="map" size="18"></uv-icon>
					<text class="m-l-10 size-28">城市:</text>
					<text class="m-l-10 size-28 bold" style="color: #122f84;" @click="copy(orderInfo.newOrderContent.cityName)">{{orderInfo.newOrderContent.cityName}}</text>
					
					<!-- <view @click="copy(orderInfo.storeName)" class="size-22 p-x-15 p-y-3 m-l-10 radius-5" style="background-color: #d1d1d15e;">
						复制
					</view> -->
				</view>
				<view class="flex-a m-t-10">
					<uv-icon name="home" size="18"></uv-icon>
					<text class="m-l-10 size-28">门店:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;" @click="copy(orderInfo.storeName)">{{orderInfo.storeName}}</text>
					
				</view>
				<view class="flex-a m-t-10">
					<uv-icon name="empty-order" size="18"></uv-icon>
					<text class="m-l-10 size-28">店铺ID:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;" @click="copy(orderInfo.storeCode)">{{orderInfo.storeCode}}</text>
					
				</view>
				<!-- <view class="flex-a m-t-10">
					<uv-icon name="phone" size="18"></uv-icon>
					<text class="m-l-10 size-28">用户手机号:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;"></text>
					<uv-button @click="copy" text="复制" size="mini" style="margin-left: 10rpx;"></uv-button>
				</view> -->
				<view class="flex-a m-t-10">
					<uv-icon name="file-text" size="18"></uv-icon>
					<text class="m-l-10 size-28">订单号:</text>
					<text class="m-l-10 size-28 bold" style="color: #999;" @click="copy(orderInfo.id)">{{orderInfo.id}}</text>
				</view>
				<view class="po-a p-x-40 p-y-10 white bold" style="top: 0%;right: 0%;background-color: #bf2121;border-radius: 0 20rpx 0 20rpx;">
					待上传
				</view>
			</view>
			<view v-if="orderInfo" class=" p-x-20 p-y-20 radius-20 bs-bx po-r m-t-20" style="background-color: #fff;">
				<view class="flex-b" v-if="orderInfo.platform==3">
					<view class="flex">
						<view class="">
							<image class="w-100 h-100" :src="orderInfo.productImg" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3" style="flex-wrap: wrap;">
							<view class="size-28 flex">
								<text>{{orderInfo.newOrderContent.productName}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view class="size-25">
								{{JSON.parse(orderInfo.newOrderContent.orderContent).packets[0].products[0].strValue}}
							</view>
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="flex-b" v-else-if="orderInfo.platform==4">
					<view class="flex">
						<view class="">
							<image class="w-100 h-100" :src="orderInfo.image" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3" style="flex-wrap: wrap;">
							<view class="size-28 flex">
								<text>{{orderInfo.productName}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true" :shadowStyle="shadowStyle" closeText="展开" color="#8e6236">
								<view v-for="item in orderInfo.newOrderContent.packets[0].products" style="font-size: 25rpx;color: #000;">
									<view class="" v-for="item1 in generateString(item)">
										{{item1}}
									</view>
								</view>
								</uv-read-more>
							</view>
							<view class="size-25 color-gray m-t-10" style="word-wrap:break-word;word-break:break-all;">{{orderList.packets[0].products[0].strValue}}</view>
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="flex-b" v-else-if="orderInfo.platform==6">
					<view class="flex">
						<view class="">
							<image class="w-100 h-100" :src="orderInfo.image" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3">
							<view class="size-28 flex">
								<text>{{orderInfo.newOrderContent.packets[0].products[0].name}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true" :shadowStyle="shadowStyle" closeText="展开" color="black">
								<view v-for="item in orderInfo.newOrderContent.packets[0].products" style="font-size: 25rpx;color: #000;">
									<view v-if="item.option_list">
										<view v-for="item1 in dksGenerateString(item)">
											{{item1}}
										</view>
									</view>
									<view v-else>
										<view v-for="item4 in item2.coupon_list[0].condiment_list">
											{{item4.name}}
										</view>
									</view>
								</view>
								</uv-read-more>
							</view>
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="flex-b" v-else-if="orderInfo.platform==2">
					<view class="flex">
						<view class="">
							<image class="w-100 h-100" :src="orderInfo.image" mode=""></image>
						</view>
						<view v-if="orderList && orderInfo" class="m-l-10 flex-column3">
							<view class="size-28 flex">
								<text>{{orderInfo.newOrderContent.packets[0].products[0].showNameCn}}</text>
								<text class="m-l-20 bold" style="color: red;">￥{{orderInfo.totalAmount}}</text>
							</view>
							<view style="padding: 10rpx;background-color: #fff;">
								<uv-read-more show-height="40rpx" textIndent="0em" :toggle="true" :shadowStyle="shadowStyle" closeText="展开" color="#8e6236">
								<view v-for="item in orderInfo.newOrderContent.packets[0].products" style="font-size: 25rpx;color: #000;">
									<view class="" v-for="item1 in kdjGenerateString(item)">
										{{item1}}
									</view>
								</view>
								</uv-read-more>
							</view>
						</view>
					</view>
					<view class="">
						×1
					</view>
				</view>
				<view class="text-r" v-if="orderInfo">
				 <text class="bold size-28">到手价：</text> <text class="bold size-20">￥</text><text class="bold" style="color: red;">{{orderInfo.realTotalAmount}}</text>
				</view>
			</view>
		</view>
		<view class="m-t-20 radius-20 p-x-20 p-y-20" style="background-color: #fff;">
			<view class="bold flex-b">
				<view class="">
					上传取餐码
				</view>
				<!-- <uv-icon name="plus-circle-fill" size="25"></uv-icon> -->
			</view>
			<view  class="p-x-10 p-y-10 m-t-20 radius-20"   style="background-color: #f9f9f973;">
				<view class="flex-b">
					<view class="">
						<view class=""  >
							<view class="m-t-20 flex-a" >
								<text style="width: 40%;">取餐码： </text> <uv-input placeholder="请填写取餐码" border="surround" v-model="uploadList.pickupCode"></uv-input>
							</view>
							
							<view class="m-t-20 flex-a" >
								<text style="width: 40%;">二维码：</text>
								<uv-upload name="1" :maxCount="1" @afterRead="afterRead($event,index)" width="100" height="100">
									<uv-qrcode v-if="ewmValue" ref="qrcode" size="100px"  :value="ewmValue"></uv-qrcode>
								</uv-upload>
							</view>
							<view class="m-t-20 flex-a">
								<text style="width: 40%;">手机号： </text> <uv-input placeholder="请填写手机号" v-model="uploadList.orderPhone" border="surround" ></uv-input>
							</view>
							<view class="m-t-20 flex-a">
								<text style="width: 40%;">官方订单号： </text> <uv-input placeholder="请填写官方订单号" v-model="uploadList.platformOrderId" border="surround" ></uv-input>
							</view>
						</view>
					</view>
					<!-- <view class="">
						<uv-icon name="close-circle-fill" size="25" color="red" @click="delUnload(index)"></uv-icon>
					</view> -->
				</view>
			</view>
			<view class="size-28 m-t-20" style="color: #eb2929;">
				请仔细核对填入的取餐码以及上传的二维码，若因有误造成的损失自己承担,与本平台无关!!!
			</view>
		</view>
		<view class="p-y-20 p-x-20 bs-bx" style="position: fixed;bottom: 0%;background-color: #fff;width: 100%;text-align: center;left: 0%;">
			<view @click="ewmUnload" class="p-y-20 white bold radius-15 bs-bx" style="background-color: #bf2121;text-align: center;">
				立即上传
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs,
		onMounted,
		nextTick
	} from "vue";
	import {
		onLoad,
		onReachBottom,
		onShow,
		onLaunch,
		onReady,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {generateString,dksGenerateString,kdjGenerateString} from '@/utils/shopStr.js'
	import {grabInfo} from '@/api/index.js'
	import {unloadEwm,queryConfiguration} from '@/api/grab/grab.js'
	import {dataGong,sortJsonKeys,sortAndFormatParams,combine} from '@/utils/encryption.js'
	let orderId = ref()
	let orderInfo = ref()
	let orderList = ref()
	let mealCode = ref()
	let ewmValue = ref()
	let platform = ref()
	let selectValue = ref()
	let upLoadValue = ref([])
	let uploadList = ref({
		orderPhone:'', //手机号
		pickupImg:'', //二维码
		pickupCode:'',//取餐码
		platformOrderId:'' //官方订单号
	}) 
	
	let merchantId = ref()
	const shadowStyle = ()=>{
		return {
			// #ifndef APP-NVUE
			backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
			// #endif
			// #ifdef APP-NVUE
			// nvue上不支持设置复杂的backgroundImage属性
			backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
			// #endif
			paddingTop: "100px",
			marginTop: "-100px",
		}
	}
	onLoad((value)=>{
		if(value.id){
			orderId.value = value.id
			getGrabInfo()
		}
	})
	const getGrabInfo = ()=>{
		let cityJinWei = {
			id:orderId.value,
			status:2,
			...dataGong()
		}
		let cenShi = sortAndFormatParams(cityJinWei) //请求序列化并变成字符串
		let combineTrue = combine(cenShi, cityJinWei.timestamp)
		grabInfo(cityJinWei,combineTrue).then(res=>{
			if(res.data){
				platform.value = res.data.platform
				if(res.data.newOrderContent){
					orderInfo.value = res.data
					orderList.value = orderInfo.value.newOrderContent
				}
				// getQueryConfiguration()
			}
		})
	}
	const copy = (value)=>{
		uni.setClipboardData({
			data: value,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: "none",
				})
			}
		});
	}
	const toGrab = ()=>{
		uni.navigateTo({
			url:`/pagesA/grab/grabQuotation?id=${orderId.value}`
		})
	}
	
	const getQueryConfiguration = ()=>{
		console.log(platform.value);
		let cityJinWei = {
			platformId:platform.value,
			orderHistoryId:orderId.value,
			...dataGong()
		}
		let cenShi = JSON.stringify(sortJsonKeys(cityJinWei)) //请求序列化并变成字符串
		console.log(cenShi);
		let combineTrue = combine(cenShi, cityJinWei.timestamp)
		
		let arr = {}
		queryConfiguration(cityJinWei,combineTrue).then(res=>{
			if(res.data){
				if(res.data.requirePickupCode==true){
					arr.requirePickupCode =''
				}
				if(res.data.requirePickupContent==true){
					arr.requirePickupContent = ''
				}
				if(res.data.requirePickupImg==true){
					arr.requirePickupImg = ''
				}
			}
		})
		selectValue.value = arr
		// nextTick(()=>{
		// 	uploadList.value.push(arr);
		// })
		console.log(uploadList.value);
	}
	
	const afterRead = (e,index)=> {
		console.log(e);
		console.log(index);
		let token = uni.getStorageSync('token')
		const tempFilePaths = e.file.url;
		uni.uploadFile({
			url: '/transminApi/orderApi/order/processQRCode', 
			filePath: tempFilePaths,
			name: 'pickupCode',
			header: {
				'X-Requested-With': 'XMLHttpRequest',
				"Accept": "application/json",
				Authorization: token
			},
			success: (res) => {
				console.log('res==========',res);
				let data = JSON.parse(res.data)
				console.log(data);
				if(data.code!=0){
					uni.showToast({
						title: data.message,
						icon: "none",
						duration:2000
					})
				} else {
					uni.showToast({
						title: '上传成功',
						icon: "none",
					})
					let imgData = JSON.parse(data.data.pickupCode)
					console.log(imgData);
					uploadList.value.pickupImg = imgData.code
					console.log(uploadList.value);
					ewmValue.value = imgData.code
					console.log('ewmValue.value======',ewmValue.value);
				}
				
			}
		});
	}
	
	const ewmUnload = ()=>{
		// uploadList.value.forEach((item,index)=>{
		// 	item.requirePickupImg = upLoadValue.value[index]
		// })
		let cityJinWei = {
			orderId:orderId.value,
			// pickupInfs:uploadList.value,
			orderPhone:uploadList.value.orderPhone,
			pickupCode:uploadList.value.pickupCode,
			pickupImg:uploadList.value.pickupImg,
			platformOrderId:uploadList.value.platformOrderId,
			// ...uploadList,
			...dataGong()
		}
		let cenShi = JSON.stringify(sortJsonKeys(cityJinWei)) //请求序列化并变成字符串
		let combineTrue = combine(cenShi, cityJinWei.timestamp)
		
		unloadEwm(cityJinWei,combineTrue).then(res=>{
			console.log(res);
			if(res.code==0||200){
				uni.showToast({
					title: res.message,
					icon: "none",
					duration:2000
				})
				setTimeout(()=>{
					uni.reLaunch({
						url:`/pages/order/order?currentStatus=${2}`
					})
				},1000)
			} else {
				uni.showToast({
					title: res.message,
					icon: "none",
					duration:2000
				})
			}
		}).catch(err=>{
			console.log(err);
		})
	}
	
	// const add = ()=>{
	// 	let arr = {
	// 		...selectValue.value
	// 	}
	// 	uploadList.value.push(arr)
	// }
	
	// const delUnload = (value)=>{
	// 	uploadList.value.splice(value,1)
	// 	upLoadValue.value.splice(value,1)
	// 	console.log(upLoadValue.value);
	// }
</script>

<style lang="scss" scoped>
	.center {
		padding-bottom: 150rpx !important;
	}
</style>
